<template>
  <div id="app">
      <el-container>
          <el-header>
              <span style="color:red">欢迎进入</span>
              <div style="float: right; margin-top: 10px" >
                  <el-dropdown>
                        <span class="el-dropdown-link">
                           <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar><i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                      <el-dropdown-menu slot="dropdown" style="margin-top: -15px">
                          <el-dropdown-item>个人中心</el-dropdown-item>
                          <el-dropdown-item>退出登录</el-dropdown-item>
                          <el-dropdown-item>设置</el-dropdown-item>
                      </el-dropdown-menu>
                  </el-dropdown>
              </div>

          </el-header>
          <el-container>
              <el-aside width="200px">
                  <el-menu
                          default-active="2"
                          class="el-menu-vertical-demo"
                          background-color="#545c64"
                          text-color="#fff"
                          active-text-color="#ffd04b">
                      <el-submenu index="1">
                          <template slot="title">
                              <i class="el-icon-location"></i>
                              <span>导航一</span>
                          </template>
                          <el-menu-item-group>
                              <template slot="title">分组一</template>
                              <el-menu-item index="1-1">选项1</el-menu-item>
                              <el-menu-item index="1-2">选项2</el-menu-item>
                          </el-menu-item-group>
                          <el-menu-item-group title="分组2">
                              <el-menu-item index="1-3">选项3</el-menu-item>
                          </el-menu-item-group>
                          <el-submenu index="1-4">
                              <template slot="title">选项4</template>
                              <el-menu-item index="1-4-1">选项1</el-menu-item>
                          </el-submenu>
                      </el-submenu>
                      <el-submenu index="2">
                          <template slot="title">
                              <i class="el-icon-menu"></i>
                              <span>导航二</span>
                          </template>
                          <el-menu-item-group>
                              <template slot="title">分组一</template>
                              <el-menu-item index="1-1">选项1</el-menu-item>
                              <el-menu-item index="1-2">选项2</el-menu-item>
                          </el-menu-item-group>
                          <el-menu-item-group title="分组2">
                              <el-menu-item index="1-3">选项3</el-menu-item>
                          </el-menu-item-group>
                          <el-submenu index="1-4">
                              <template slot="title">选项4</template>
                              <el-menu-item index="1-4-1">选项1</el-menu-item>
                          </el-submenu>
                      </el-submenu>
                      <el-submenu index="3">
                          <template slot="title">
                              <i class="el-icon-document"></i>
                              <span>导航三</span>
                          </template>
                          <el-menu-item-group>
                              <template slot="title">分组一</template>
                              <el-menu-item index="1-1">选项1</el-menu-item>
                              <el-menu-item index="1-2">选项2</el-menu-item>
                          </el-menu-item-group>
                          <el-menu-item-group title="分组2">
                              <el-menu-item index="1-3">选项3</el-menu-item>
                          </el-menu-item-group>
                          <el-submenu index="1-4">
                              <template slot="title">选项4</template>
                              <el-menu-item index="1-4-1">选项1</el-menu-item>
                          </el-submenu>
                      </el-submenu>
                      <el-submenu index="4">
                          <template slot="title">
                              <i class="el-icon-setting"></i>
                              <span>导航四</span>
                          </template>
                          <el-menu-item-group>
                              <template slot="title">分组一</template>
                              <el-menu-item index="1-1">选项1</el-menu-item>
                              <el-menu-item index="1-2">选项2</el-menu-item>
                          </el-menu-item-group>
                          <el-menu-item-group title="分组2">
                              <el-menu-item index="1-3">选项3</el-menu-item>
                          </el-menu-item-group>
                          <el-submenu index="1-4">
                              <template slot="title">选项4</template>
                              <el-menu-item index="1-4-1">选项1</el-menu-item>
                          </el-submenu>
                      </el-submenu>
                  </el-menu>
              </el-aside>
              <el-main>Main</el-main>
          </el-container>
      </el-container>
  </div>
</template>

<script>
    export default {
        name: "home",
        data(){

        }
    }
</script>

<style scoped>
    html,body,#app{
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
    }
    .el-container{
        height: 100%;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        height: 100%;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }
    .el-menu-vertical-demo{
        height: 100%;
    }
</style>